<template>
  <div class="playlists-container">
   <!-- 同步 -->
    <div class="top-card">
      <!-- 封面 -->
      <div class="icon-wrap">
        <img :src="topPlayList.coverImgUrl+'?param=200y200'" alt="" />
      </div>
      <div class="content-wrap">
        <div class="tag">精品歌单</div>
        <!-- 标题 -->
        <div class="title">
          {{ topPlayList.title }}
        </div>
        <!-- 介绍 -->
        <div class="info">
          {{ topPlayList.description }}
        </div>
      </div>
      <!-- 背景 -->
      <img :src="topPlayList.coverImgUrl" alt="" class="bg" />
      <div class="bg-mask"></div>
    </div> 
    <div class="tab-container">
      <!-- tab栏 顶部 -->
      <div class="tab-bar">
        <span class="item" @click="tag = '全部'" :class="{ active: tag === '全部' }">全部</span>
        <span class="item" @click="tag = '欧美'" :class="{ active: tag === '欧美' }">欧美</span>
        <span class="item" @click="tag = '华语'" :class="{ active: tag === '华语' }">华语</span>
        <span class="item" @click="tag = '流行'" :class="{ active: tag === '流行' }">流行</span>
        <span class="item" @click="tag = '说唱'" :class="{ active: tag === '说唱' }">说唱</span>
        <span class="item" @click="tag = '摇滚'" :class="{ active: tag === '摇滚' }">摇滚</span>
        <span class="item" @click="tag = '民谣'" :class="{ active: tag === '民谣' }">民谣</span>
        <span class="item" @click="tag = '电子'" :class="{ active: tag === '电子' }">电子</span>
        <span class="item" @click="tag = '轻音乐'" :class="{ active: tag === '轻音乐' }">轻音乐</span>
        <span class="item" @click="tag = '影视原声'" :class="{ active: tag === '影视原声' }">影视原声</span>
        <span class="item" @click="tag = 'ACG'" :class="{ active: tag === 'ACG' }">ACG</span>
        <span class="item" @click="tag = '怀旧'" :class="{ active: tag === '怀旧' }">怀旧</span>
        <span class="item" @click="tag = '治愈'" :class="{ active: tag === '治愈' }">治愈</span>
        <span class="item" @click="tag = '旅行'" :class="{ active: tag === '旅行' }">旅行</span>
      </div>
      <!-- tab的内容区域 -->
      <div class="tab-content">
        <div class="items">
          <div class="item" v-for="(item, index) in playlists" :key="index" @click="toPlaylist(item.id)">
            <div class="img-wrap">
              <div class="num-wrap">
                播放量:
                <span class="num">{{ item.playCount }}</span>
              </div>
              <img :src="item.coverImgUrl+'?param=200y200'" alt="" />
              <span class="el-icon-video-play icon-play"></span>
            </div>
            <p class="name">{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
      <!-- 分页器 -->
    <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="total" :current-page="page" :page-size="pageSize">
    </el-pagination>
  </div>
</template>

<script>
import { highquality, catlist, playlist } from '../api/playlists'
export default {
   data(){
      return{
          // 顶部精品歌单
         topPlayList:{},
         // 总条数
         total:0,
         // 页码
         page:1,
         pageSize:10,
         // 歌单列表
         playlists:[],
         tag: '全部',
      }
   },
   created(){
      // 顶部数据
    this.getHighquality()
   //  列表数据
    this.getPlaylist()
    this.getTags()
   },
   methods:{
     getTags() {
        catlist().then(res => {
          console.log(res)
        })
     },
      // 顶部数据
     getHighquality(){
       highquality({
          limit:1,
          cat:"全部"
       }).then(res => {
         this.topPlayList = res.playlists[0]
       })

     },
   //   列表数据
     getPlaylist(){
       playlist({
         limit:20,
         offset:(this.page-1)*10,
         cat:this.tag
       }).then(res => {
         this.total = res.total
         this.playlists = res.playlists
       })
     },
      // 跳转到详情页
      toPlaylist(id){
       console.log(id)
       this.$router.push('/playlist?q='+id)
      },
   //   分页
   handleCurrentChange(val){
      this.page = val
      this.getPlaylist()
   }
   },
   watch:{
      tag(){
         // 顶部数据
         this.getHighquality()
         // 列表数据
         this.getPlaylist()
         // 修改页码为1
         this.page = 1
      }
   }
}
</script>

<style lang="scss" scoped>
.playlists-container {
    .top-card {
        padding: 20px;
        height: 200px;
        display: flex;
        position: relative;
        overflow: hidden;
        border-radius: 5px;
        .icon-wrap {
            margin-right: 20px;
            z-index: 1;
            img {
                width: 160px;
                height: 160px;
            }
        }
        .content-wrap {
            z-index: 1;
            .tag {
                color: #dfac67;
                border: 1px solid #dfac67;
                width: 100px;
                height: 30px;
                text-align: center;
                border-radius: 5px;
                font-size: 16px;
                line-height: 30px;
                cursor: pointer;
            }
            .title {
                color: white;
                padding-top: 10px;
            }
            .info {
                color: #888482;
                font-size: 14px;
                padding-top: 5px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 5;
            }
        }
        .bg {
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 0;
            filter: blur(20px);
        }
        .bg-mask {
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }
    }
    .tab-container {
        padding-top: 30px;
        .tab-bar {
            display: flex;
            justify-content: flex-end;
            .item {
                font-size: 15px;
                color: gray;
                margin-right: 20px;
                cursor: pointer;
                &.active {
                    color: #dd6d60;
                }
            }
        }
        .tab-content {
            margin-top: 20px;
            .items {
                display: flex;
                flex-wrap: wrap;
                .item {
                    width: 200px;
                    margin: 10px;
                    position: relative;
                    overflow: hidden;
                    cursor: pointer;
                    img {
                        width: 200px;
                        height: 200px;
                        border-radius: 5px;
                    }
                    .num-wrap {
                        position: absolute;
                        top: 0;
                        left: 0;
                        font-size: 14px;
                        color: white;
                        line-height: 30px;
                        background: rgba(0, 0, 0, 0.5);
                        height: 30px;
                        width: 100%;
                        padding-left: 5px;
                        top: -30px;
                        overflow: hidden;
                    }
                    &:hover {
                        .num-wrap {
                            top: 0;
                        }
                    }
                    .img-wrap {
                        position: relative;
                        cursor: pointer;
                        .icon-play {
                            position: absolute;
                            right: 10px;
                            bottom: 13px;
                            width: 40px;
                            height: 40px;
                            color: #dd6d60;
                            font-size: 20px;
                            border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background: rgba(255, 255, 255, 0.8);
                            opacity: 0;
                            &::before {
                                transform: translateX(1px);
                            }
                        }
                        &:hover {
                            .icon-play {
                                opacity: 1;
                            }
                        }
                    }
                    .name {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        font-size: 14px;
                    }
                }
            }
        }
    }
}

</style>